<template>
  <div ref="charts" class="charts"></div>
</template>

<script>
import * as echarts from "echarts";
// 引入中国地图json
import chinaJson from "@/assets/china.json";
import studentApi from "@/api/student";

export default {
  name: "MapCharts",
  data() {
    return {
      myCharts: null,
      // x轴数据
      provinceData: [],
    };
  },
  computed: {
    // 获取最多人数的省份
    maxProvince() {
      let max = 0;
      this.provinceData.forEach((item) => {
        if (item.value > max) {
          max = item.value;
        }
      });
      return max;
    },
  },
  watch: {
    // 监听provinceData变化
    provinceData() {
      // 更新图表数据
      this.myCharts.setOption({
        series: [
          {
            data: this.provinceData,
          },
        ],
      });
    },
    // 监听maxProvince变化
    maxProvince() {
      // 更新图表数据
      this.myCharts.setOption({
        visualMap: {
          max: this.maxProvince,
        },
      });
    },
  },
  mounted() {
    // 获取学生省份数据
    this.getStudentProvince();
    // 初始化charts实例
    this.myCharts = echarts.init(this.$refs.charts);
    // 使用中国地图
    echarts.registerMap("china", chinaJson);
    // 加载动画
    this.myCharts.showLoading();
    // 渲染图表
    this.renderCharts();
    // 隐藏加载动画
    this.myCharts.hideLoading();
    // 监听窗口大小变化
    window.addEventListener("resize", () => {
      this.myCharts.resize();
    });
    // 监听地图点击事件
    this.myCharts.on("click", (params) => {
      this.$router.push({
        name: "StudentList",
        query: {
          name: params.name,
          type: 3,
        },
      });
    });
  },
  methods: {
    // 渲染图表
    renderCharts() {
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: "Provincial Distribution Map",
        },
        tooltip: {
          formatter: function (params) {
            if (params.value) {
              return (
                params.seriesName +
                "<br/>" +
                params.name +
                " : " +
                params.value +
                "人"
              );
            } else {
              return (
                params.seriesName + "<br/>" + params.name + " : " + "0" + "人"
              );
            }
          },
        },
        dataRange: {
          //左下角的颜色块。start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值
          x: "50px",
          y: "525px",
          splitList: [
            { start: 21, label: "> 21  极高", color: "#b80909" },
            { start: 16, end: 20, label: "16 - 20  高", color: "#e64546" },
            { start: 11, end: 15, label: "11 - 15  中", color: "#f57567" },
            { start: 6, end: 10, label: "6 - 10  低", color: "#ff9985" },
            { start: 0, end: 5, label: "0 -5 极低", color: "#ffe5db" },
          ],
        },
        series: [
          {
            name: "各省学生人数分布",
            data: this.provinceData,
            type: "map",
            map: "china",
            // 地图放大
            zoom: 1.0,
            emphasis: {
              itemStyle: {
                //设置悬浮区块颜色
                areaColor: "rgba(61, 151, 221, 0.5)",
              },
              label: {
                show: false,
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myCharts.setOption(option);
    },
    // 获取学生省份数据
    getStudentProvince() {
      studentApi.getProvince().then((res) => {
        this.provinceData = res.data;
      });
    },
  },
};
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
